<template>
  <BasicTable @register="registerTable" :showIndexColumn="false"> </BasicTable>
</template>
<script lang="ts" setup>
import { BasicTable, useTable } from '@/components/Table'
import { watch } from 'vue'

const props = defineProps({
  loading: { type: Boolean },
})

const [registerTable, { setColumns, setTableData, setLoading }] = useTable({
  columns: [],
  canResize: false,
  scroll: { y: '100%' },
  pagination: false,
})

watch(
  () => props.loading,
  (val) => {
    setLoading(val)
  },
)

const setData = (data) => {
  const newData = [{ type: '数值' }, { type: '占比' }]
  const headerList = data.titleList.map((item: any, index: any) => {
    newData[0][item] = data.valueList[index]
    newData[1][item] = data.ratioList[index]
    return {
      title: item,
      dataIndex: item,
      width: 120,
      customRender: ({ text, record: { type } }) => {
        if (typeof text === 'number') {
          if (type === '占比') {
            return (text * 100).toFixed(2) + '%'
          }
          return text
        } else {
          return text || '--'
        }
      },
    }
  })
  headerList.unshift({
    title: '类别',
    dataIndex: 'type',
    width: 60,
    fixed: 'left'
  })
  setColumns(headerList)
  setTableData(newData)

}
defineExpose({
  setData,
})
</script>
